<template>
  <div>
    <!-- 账号管理 -->
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <b>/<img style="top: 1px" src="../assets/img/account2.png" />账号管理</b>
    </div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="cardTits cardTitss cardTitdd" shadow="hover">
          <div class="subject-title">
            <div class="query">
              <div class="flex-box">
                <div class="query-input">
                  <el-input
                    placeholder="平台名称/企业名称/统一社会信用代码"
                    v-model="searchValue"
                  ></el-input>
                </div>
                <div class="query-select">
                  <el-select v-model="selectValue" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </div>
                <el-button class="query-btn" @click="getAccountData" type="primary">查询</el-button>
              </div>
              <div style="margin-right: 20px">
                <el-button class="query-btn" @click="establishAccount" type="primary">创建平台</el-button>
              </div>
            </div>
          </div>

          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            ref="multipleTable"
            @sort-change="sortChange"
          >
            <el-table-column prop="id" width="80" align="center" label="ID" sortable="custom"></el-table-column>
            <el-table-column
              prop="name"
              label="平台名称"
              sortable="custom"
            ></el-table-column>
            <el-table-column
              prop="enterpriseName"
              label="企业名称"
              sortable="custom"
            ></el-table-column>
            <el-table-column
              prop="socialCreditCode"
              label="统一社会信用代码"
              width="190"
              sortable="custom"
            ></el-table-column>
            <el-table-column
              prop="linkManName"
              label="联系人"
              sortable="custom"
            ></el-table-column>
            <el-table-column
              prop="linkManPhone"
              label="手机号"
              sortable="custom"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              sortable="custom"
              width="150"
            >
              <template #default="item">
                {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
              </template>
            </el-table-column>
            <el-table-column prop="isDisable" align="center" width="60" label="状态">
              <template #default="item">
                {{ item.row.isDisable == 0 ? '禁用' : '启用' }}
              </template>
            </el-table-column>

            <el-table-column
              prop="caozuo"
              label="操作"
              width="120"
              align="center"
              class-name="editor"
            >
              <template #default="item">
                <router-link
                  :to="{ path: '/establishAccount', query: { id: item.row.platformNo } }"
                >
                  <el-button type="text">详情</el-button>
                </router-link>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="isDisableMethods(item.row.id, 1, item.row.name)" v-if="item.row.isDisable == 0" type="text">启用</el-button>
                <el-button @click="isDisableMethods(item.row.id, 0, item.row.name)" v-else type="text">禁用</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            v-if="tableData.length > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="arrPage"
            :page-size="selectPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: "account",
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      searchValue: "",
      selectValue: "",
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      tableData: [],
    };
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  mounted() {
    this.getAccountData()
  },
  methods: {
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getAccountData()

    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getAccountData()
    },
    getAccountData() {
      this.tableData = []
      this.total = 0
      this.$http({
        url: "/api/platform/management/selectPlatformListByMixed",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: this.searchValue,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          isDisable: this.selectValue, // 是否禁用
          platformId: "",
          platformName: "",
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        console.log(data)
        if (data.code === 0 && data.result !== null) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    isDisableMethods(id, isDisable, name) {
      // 是否启用禁用
      this.$http({
        url: "/api/platform/management/platformDisableManage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          isDisable: isDisable, // 是否禁用
          platformId: id,
          platformName: name
        },
      }).then((data) => {
        if(data.code == 0) {
          if(isDisable == 0) {
            ElMessage({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: "禁用成功",
              type: 'success'
            })
          }else {
            ElMessage({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: "启用成功",
              type: 'success'
            })
          }
          this.getAccountData()
        }
      });
    },
    sortChange(d) {
        // 监听排序
        if(d.prop == null) {
            // 默认排序方式
            this.orderByZH = false
            this.orderByAsc = false
            this.orderByColume = 'createTime'
        }else {
            let orderByZH = false
            if(d.prop == "enterpriseName" || d.prop == "linkManName" || d.prop == "name") {
            orderByZH = true
            }
            this.currentPage = 1
            this.selectPage = 10
            let orderByAsc = d.order == "descending" ? false : true
            this.orderByZH = orderByZH
            this.orderByAsc = orderByAsc
            this.orderByColume = d.prop
        }
        this.getAccountData();
    },
    establishAccount() {
      this.$router.push({ name: 'establishAccount' })
    }
  },
};
</script>
<style lang="scss" scoped>
.subject-title {
	margin: 21px 0 16px 20px;
	// 查询
	.query {
		display: flex;
		align-items: center;
		margin-bottom: 23px;
    justify-content: space-between;
    .flex-box {
      display: flex;
    }
		.query-input {
			width: 260px;
			margin-right: 10px;
			& :deep(.el-input) {
				line-height: 32px;
				.el-input__inner {
					height: 32px;
					font-size: 12px;
					border-color: #EFF4FA;
				}
			}
		}
		.query-select {
			width: 120px;
			margin-right: 10px;
			& :deep(.el-input) {
				line-height: 32px;
				.el-input__inner {
					height: 32px;
					font-size: 12px;
					border-color: #EFF4FA;
				}
				.el-input__icon {
					line-height: 32px;
				}
			}
		}
		.query-btn {
			min-width: 60px;
      padding: 0 10px;
			height: 32px;
			min-height: 32px;
			background-color: #326CF0;
			border-color: #326CF0;
			font-size: 12px;
			font-weight: normal;
		}
	}
}
</style>
